import React, { useState, useEffect } from 'react';
// import axios from 'axios';
import GridLayout from 'react-grid-layout';
import Card from "@/pages/page/components/card";
// import {request} from "ice";

function AccessPage() {
  const [layout, setLayout] = useState<any>([]);
  const accessUrl = window.location.href;
  const [data, setData] = useState<any>([
    {
      num:22345.34,
      date:'2024-01-08',
      type:1,
      name:'总资产'
    },
    {
      num:1200,
      date:'2024-02-08',
      type:2,
      name:'个人贷款'
    },
    {
      num:12345.34,
      date:'2024-03-08',
      type:3,
      name:'对公客户数',
      num1:6512,
      date1:'2024-01-08',
      name1:'人民币有效户数'
    },
    // {
    //   num:26785.34,
    //   date:'2024-04-08',
    //   type:4,
    //   name:'总资产'
    // },
    // {
    //   num:2345.34,
    //   date:'2024-05-08',
    //   type:1,
    //   name:'总资产'
    // },
    // {
    //   num:22345.56,
    //   date:'2024-06-08',
    //   type:1,
    //   name:'总资产'
    // },
    // {
    //   num:2345.34,
    //   date:'2024-05-08',
    //   type:1,
    //   name:'总资产'
    // },
    // {
    //   num:22345.56,
    //   date:'2024-06-08',
    //   type:1,
    //   name:'总资产'
    // },
  ]);
  const res:any={
    "code": "200",
    "msg": "成功",
    "data": {
      "result": [
        {
          "name": "运行中",
          "value": "40"
        },
        {
          "name": "初始化",
          "value": "38"
        },
        {
          "name": "成功",
          "value": "32"
        },
        {
          "name": "等待",
          "value": "30"
        },
        {
          "name": "就绪",
          "value": "38"
        },
        {
          "name": "中断完成",
          "value": "14"
        },
        {
          "name": "失败",
          "value": "10"
        }
      ]
    }
  }
  // 获取布局数据并渲染页面布局
  useEffect(() => {
    getLayout()
  }, [accessUrl]);

  const getLayout = async () => {
    console.log(accessUrl)
    // axios.get(`/api/access-layout/${encodeURIComponent(accessUrl)}`)
    //   .then(response => {
    //     setLayout(response.data.layout);
    //   })
    //   .catch(error => {
    //     console.error('Error fetching layout:', error);
    //   });
    // const res: any = await request({
    //   // url: `/api/access-layout${encodeURIComponent(accessUrl.split('accessPage')[1])}`,
    //   url: `/api/access-layout/${accessUrl.split('accessPage/')[1]}`,
    //   method: 'get',
    //   instanceName: 'layout_config',
    // });
    // if (res) {
    //   if (res.layout) {
    //   //   console.log(data.result)
    //   let arr:any=[]
    //   res.layout.layout.map(item=>{
    //     let {i,x,y,w,h,component}=item
    //     let obj:any={i,x,y,w,h,component:<Card ddPieSource={{sourceList: component?.ddPieSource?.sourceList, isRate: component?.ddPieSource?.isRate}} data={component?.data} userLineSource={{ ydata:component?.userLineSource?.ydata, sourceList: component?.userLineSource?.sourceList }}/>}
    //     arr.push(obj)
    //   })
    //   setLayout(arr)
    //   console.log(arr)
    //   }
    // } else {
    // }


    // setLayout([
    //   { i: 'a', x: 0, y: 0, w: 1, h: 1, component: <Card ddPieSource={{sourceList: res.data.result, isRate: true}} data={data[0]} userLineSource={{ ydata: [], sourceList: [] }}/> },
    //   { i: 'b', x: 1, y: 0, w: 1, h: 1, component: <Card ddPieSource={{sourceList: res.data.result, isRate: true}} data={data[1]} userLineSource={{ ydata: [], sourceList: [] }}/> },
    //   { i: 'c', x: 2, y: 0, w: 1, h: 1, component: <Card ddPieSource={{sourceList: res.data.result, isRate: true}} data={data[2]} userLineSource={{ ydata: [], sourceList: [] }}/> }
    // ])
  };

  return (
    <div>
      <h1>Access Page1</h1>
      <GridLayout
        className="layout"
        cols={3}
        rowHeight={100}
        width={window.innerWidth}
      >
        {layout.map(item => (
          <div key={item.i} style={{pointerEvents:'none'}} data-grid={item}>{item.component}</div>
        ))}
      </GridLayout>
    </div>
  );
}

export default AccessPage;
